<template>
  <div>
    <!-- 头部内容 -->
    <div>
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        style="background-image: linear-gradient(90deg, #bf73ff, #7579ff)"
      />
    </div>
    <!-- 详情 -->

    <div class="orderLines">
      <van-card
      v-for="order in orderLines.orderLines" :key="order.id"
        
        :price="order.product.price"
        :desc="order.product.description"
        :title="order.product.name"
        :thumb="order.product.photo"
        
      />
      <p>总计：￥{{orderLines.total}}</p>
    </div>

    <!-- 地址栏 -->
    <div class="address">
      <van-card

   :title="'服务地址:'+orderLines.address.province+orderLines.address.city+orderLines.address.area+orderLines.address.address"
>
  <template #tags>
    <span>联系人：（{{orderLines.customer.username}}）电话：{{orderLines.customer.telephone}}</span><br>
    <span>下单时间：{{ moment(orderLines.orderTime).format('YYYY-MM-DD HH:mm:SS') }}</span><br>
    <span>服务时间：{{ moment(orderLines.serviceTime).format('YYYY-MM-DD HH:mm:SS') }}</span>
  </template>
  
</van-card>
    </div>
    <div v-if="orderLines.status=='待接单'" class="btnBox">
      <van-button  @click="jiedan"  type="primary" size="small"  style="background-image: linear-gradient(90deg, #bf73ff, #7579ff); width:66px">接单</van-button>
      
      <van-button  @click="bujiedan" type="primary" size="small" style="margin-left: 40px; background-image: linear-gradient(90deg, #bf73ff, #7579ff)" >拒绝订单</van-button>
    </div>

    <div v-if="orderLines.status=='待服务'" class="btnBox">
      <van-button  @click="daifuwu"  type="primary" size="small"  style="background-image: linear-gradient(90deg, #bf73ff, #7579ff)">完成服务</van-button>
    </div>
    <div v-if="orderLines.status=='待确认'" class="btnBox">
      <div class="daiqueren" style="background-image: linear-gradient(90deg, #bf73ff, #7579ff)" >等待顾客确认订单</div>
     
    </div>
  </div>
</template>

<script>
const moment = require("moment");
import { get, post, post_json } from "@/http/axios";
export default {
  data() {
    return {
      orderLines: this.$route.query.dindanId,
      orderId:this.$route.query.dindanId.id,
    };
  },
  computed: {},
  methods: {
    moment,
    // 反回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },

  
    jiedan(){
       let data = {
        orderId:this.orderId
      };
      let res = get('/order/takeOrder',data)
     
      this.$router.go(-1);
    },

    bujiedan(){
       let data = {
        orderId:this.orderId
      };
      let res = get('/order/rejectOrder',data)
     
      this.$router.go(-1);
    },
    daifuwu() {
       let data = {
        orderId:this.orderId
      };
      let res = get('/order/serviceCompleteOrder',data)
     
      this.$router.go(-1);
    }
    
  },

  created() {},
};
</script>

<style lang="scss" scoped>
.address {
  margin-top: 40px;
}
.btnBox{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 20px;
  .daiqueren{
    height: 30px;
    width: 150px;
    line-height: 30px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
  }
}
</style>